<!-- 
    需要传入的props：
    hotelName: String, 酒店的名字
    hotelType: String, 酒店的类型
    hotelId: String, 酒店的Id
    imgSrc: String, 酒店图片的路径
 -->

<template>
    <el-card class="card">
        <img :src="imgSrc" class="image" />
        <div style="padding: 10px">
            <span>{{ hotelName }}</span>
            <div class="bottom">
                <time class="type">{{ hotelType }}</time>
                <el-button text bg class="button" type="danger" @click="onTakeDown()">下架</el-button>
                <el-button text bg class="button" type="primary" @click="dialog = true">编辑</el-button>
            </div>
        </div>
    </el-card>

    <el-dialog v-model="dialog" title="编辑酒店信息">
        <el-form :model="form">
            <el-form-item label="酒店名字" :label-width="formLabelWidth">
                <el-input v-model="new_hotelName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="酒店类型" :label-width="formLabelWidth">
                <el-select v-model="new_hotelType" placeholder="请选择酒店类型">
                    <template v-if="hotelType === '三星级' || hotelType === '四星级' || hotelType === '五星级'">
                        <el-option label="三星级" value="三星级" />
                        <el-option label="四星级" value="四星级" />
                        <el-option label="五星级" value="五星级" />
                    </template>
                    <template v-else>
                        <el-option label="青年旅舍" value="青年旅舍" />
                        <el-option label="民宿" value="民宿" />
                    </template>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-form-item label="上传酒店图片" :label-width="formLabelWidth">
                    <uploadImage ref="upload" :limits="1" />
                </el-form-item>
            </el-form-item>
        </el-form>
        <template #footer>
            <span>
                <el-text type="warning">{{ msg }}</el-text>
                <el-button @click="dialog = false">取消</el-button>
                <el-button type="primary" @click="onSubmit()">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style scoped>
.card {
    position: relative;
    width: 220px;
    height: 300px;
    padding: 0px;
}

.type {
    font-size: 12px;
    color: #999;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.button {
    padding: 0;
    min-height: auto;
}

.image {
    width: 100%;
    display: block;
}
</style>

<script>
import uploadImage from '../../../components/images/uploadImage.vue'
import { imgPostRequest, deleteHotel, patchRequestWithRaw } from '../../../api/axiosAPI'
import { uploadImageToNet } from '../../../api/imageApi'
import { Delete } from '@element-plus/icons-vue'

export default {
    props: {
        hotelName: String,
        hotelType: String,
        hotelId: String,
        imgSrc: String,
    },

    setup() {

    },

    data() {
        return {
            dialog: false,
            msg: null,
            isValid: false,
            new_hotelName: this.hotelName,
            new_hotelType: this.hotelType,
            // imgPaths: this.$refs.upload.dialogImageUrl
        }
    },

    methods: {
        onSubmit() {
            let fileList = this.$refs.upload.fileList;
            if (this.hotelName === null || this.hotelName === '' || this.hotelType === null || this.hotelType === '') {
                this.msg = '请填写所有信息!';
                this.isValid = false;
                return;
            } else if (JSON.stringify(fileList) === '[]') {
                this.msg = '请上传酒店图片!';
                this.isValid = false;
            } else {
                let temp = this.$refs.upload.getFileExposed();
                let imgPaths = '';

                let formdataImg = new FormData();
                formdataImg.append('file', temp[0].raw);
                uploadImageToNet(formdataImg)
                    .then((response) => {
                        if (response.status === 200) {
                            return response.data;
                        }
                    })
                    .then((data) => {
                        imgPaths = data.rows[0].url;
                        console.log(imgPaths);
                    })
                    .then(() => {
                        patchRequestWithRaw('http://localhost:8022/hotel/update', {
                            name: this.new_hotelName,
                            type: this.new_hotelType,
                            hid: this.hotelId,
                            imgPath: imgPaths
                        }).then((response) => {
                            if (response.status === 200 && response.data.msg === 'SUCCESS') {
                                alert('更新成功!');
                                this.dialog = false;
                                if (this.hotelType === '青年旅舍' || this.hotelType === '民宿') {
                                    this.$parent.$parent.$parent.getAllNonStarHotels();
                                } else {
                                    this.$parent.$parent.$parent.getAllStarHotels();
                                }
                            } else {
                                alert('更新失败，请稍后再试!');
                            }
                        })
                    })
            }
        },

        //下架酒店
        onTakeDown() {
            ElMessageBox.confirm(
                '确定否是删除该档案',
                'Warning',
                {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning',
                    icon: markRaw(Delete),
                }
            )
                .then(() => {
                    console.log('下架:' + this.hotelName + ' id:' + this.hotelId);
                    deleteHotel(`[${this.hotelId}]`)
                        .then((response) => {
                            if (response.status === 200 && response.data.msg === 'SUCCESS') {
                                ElMessage({
                                    type: 'success',
                                    message: '下架成功',
                                })
                                if (this.hotelType === '青年旅舍' || this.hotelType === '民宿') {
                                    this.$parent.$parent.$parent.getAllNonStarHotels();
                                } else {
                                    this.$parent.$parent.$parent.getAllStarHotels();
                                }
                            } else {
                                ElMessage({
                                    type: 'error',
                                    message: '下架失败',
                                })
                            }
                        })
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '取消删除',
                    })
                })

            // console.log('下架:' + this.hotelName + ' id:' + this.hotelId);
            // deleteHotel(`[${this.hotelId}]`)
            //     .then((response) => {
            //         if (response.status === 200 && response.data.msg === 'SUCCESS') {
            //             alert('下架成功!');
            //             if (this.hotelType === '青年旅舍' || this.hotelType === '民宿') {
            //                 this.$parent.$parent.$parent.getAllNonStarHotels();
            //             } else {
            //                 this.$parent.$parent.$parent.getAllStarHotels();
            //             }
            //         } else {
            //             alert('下架失败，请稍后再试!');
            //         }
            //     })
        }
    }
}
</script>

